<template lang="html">
  <div class="main-page" id="store-page">
    <!-- 标题 -->
    <!-- <van-nav-bar class="main-header" title="提现记录" :left-arrow="true" :fixed="true" :z-index="11" @click-left="onClickLeft" /> -->
    <nav-bar :title="'提现记录'" @goBack="onClickLeft"/>
    <!-- 主体内容 -->
    <div class="main-content has-main-tabbar has-header-space">
      <div class="indep-notice-bar" v-if="show">
        <div class="indep-notice-bar__text">
          <span>温馨提示：您的提现记录默认显示近7天的记录，若要查看更多，请选择时间查看提现历史.</span>
        </div>
        <img class="indep-notice-bar__close" @click="onHidden" src="https://mjmh.meijiameihuo.com/wechat/images/icon/notice-bar-close.png" alt="">
      </div>
      <div>
        <time-long @selectTime="getList"></time-long>
        <van-cell v-for="(item, index) in recordList" :index="index" :key="index" border>
          <div slot="title">
            <div style="color:#999999;font-size:13px;">{{item.create_at}}</div>
            <div style="color:#17273A;font-size:16px;">{{item.cash_type === 1?'微信':'银行卡'}}提现 </div>
            <div v-if="item.cash_status=== 5" style="color:#E91F3F;font-size:13px;">{{item.cash_result}}</div>
          </div>
            <div>
              <div style="color:#E91F3F;font-size:18px;">+{{item.amount}}</div>
              <div style="color:#E91F3F;font-size:14px;">{{item.cash_status=== 4?'已到账':'提现失败'}}</div>
            </div>
         </van-cell>
         <not-data v-if="!recordList.length" icon="icon_2" txt="暂无数据~"></not-data>
      </div>
    </div>
  </div>
</template>

<script>
import NotData from '@/components/global/not-data.vue'
import TimeLong from '@/components/global/time-long.vue'
import NavBar from '@/components/global/nav-bar.vue'

export default {
  components: { NotData, TimeLong, NavBar },
  data () {
    return {
      active: 1,
      time: '7d',
      recordList: [],
      page: {
        totalPage: null,
        currentPage: 0,
        pageSize: 10
      },
      nothing: false,
      show: true
    }
  },
  created () {
    console.log(this.$route)
    this.getRecordInfo(this.time, 0)
    // window.addEventListener('scroll', this.handleScroll, false)
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll, false) // 监听（绑定）滚轮滚动事件
    window['getUpload'] = () => {
      this.getRecordInfo(this.time, 0)
    }
  },
  destroyed () {
    this.nothing = false
    window.removeEventListener('scroll', this.handleScroll) //  离开页面清除（移除）滚轮滚动事件
  },
  methods: {
    onHidden () {
      this.show = false
    },
    handleScroll () {
      // 变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
      // 滚动条到底部的条件
      if (scrollTop + windowHeight >= scrollHeight) {
        this.page.currentPage++
        console.log('1-' + '距顶部' + scrollTop + '可视区高度' + windowHeight + '滚动条总高度' + scrollHeight)
        if (this.nothing) {
          this.$toast({ forbidClick: true, duration: 2000, message: '已经到底了...' })
        } else {
          this.$toast.loading('加载中...')
          this.getRecordInfo(this.time, this.page.currentPage)
        }
      } else {
        console.log('0-' + '距顶部' + scrollTop + '可视区高度' + windowHeight + '滚动条总高度' + scrollHeight)
      }
    },
    openMsg () {
      console.log(1223)
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    getList (val) {
      console.log(val)
      this.page.currentPage = 0
      this.nothing = false
      this.recordList = []
      this.time = val
      this.getRecordInfo(this.time, 0)
    },
    getRecordInfo (time, page) { // 获取提现记录列表
      console.log(time)
      var data = {
        time: time || this.time,
        sort: 'create_at',
        page: page === undefined ? '' : page
      }
      return new Promise((resolve, reject) => {
        this.$Axios({ url: 'account_user_cash', params: data, method: 'get' }).then((res) => { // 请求成功
          this.$toast.clear()
          console.log(res)
          if (res.return_code === '0000') {
            if (res.data && res.data.list.length !== 0) {
              res.data.list.map((item) => {
                this.recordList.push(item)
              })
            } else {
              this.nothing = true
            }
            console.log('请求成功')
          } else {
            console.log('请求错误')
          }
          resolve(res)
        }).catch((error) => { // 请求失败
          this.$_requestInterceptor('error', error)
          reject(error)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.record{
  margin-top:10px;
}
.indep-notice-bar {
  position: relative;
  background: #FDF7ED;
  padding: 4px 35px 4px 15px;
}

.indep-notice-bar__text {
  min-height: 17px;
  line-height: 17px;
  font-size: 12px;
  color: #CB9956;
}

.indep-notice-bar__close {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
}
</style>
